<script src="../../../../../../Documents/Tencent Files/1678490946/FileRecv/request.js"></script>
<template>
  <div class="app">
    <div style="position:fixed;bottom: 30px;">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :current-page="currentpage"
        :total="total">
      </el-pagination>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      align="center"
      >
      <el-table-column
        prop="createTime"
        label="创建日期"
        >
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        >
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号码"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="role"
        label="权限"
        align="center"
        >
      </el-table-column>
<!--      操作按钮-->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<!--          ***********************************************************************************-->
          <el-dialog
          title="编辑"
          :visible.sync="dialogVisible"
          width="30%"
          style="border: 0"
          :before-close="handleClose">
<!--            ------------------------------------------------------------------------------------->
            <el-form  label-width="80px" :model="formLabelAlign">
              <el-form-item label="姓名">
                <el-input v-model="formLabelAlign.username"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="formLabelAlign.email"></el-input>
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input v-model="formLabelAlign.phone"></el-input>
              </el-form-item>
              <el-form-item label="权限">
                <el-select v-model="formLabelAlign.role">
                  <el-option label="管理员" value="admin"></el-option>
                </el-select>
              </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="updateUser(formLabelAlign.id,formLabelAlign)">保存</el-button>
            </span>
          </el-dialog>
<!--          ***********************************************************************************-->
          <el-button
            size="mini"
            type="danger"
            style="margin-left: 10px"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import UserApi from '@/api/User/user'
  export default {
    data() {
      return {
        //表单数据
        tableData: [],
        total:0,
        currentpage:1,
        dialogVisible: false,
        formLabelAlign: {}
      }
    },
    mounted() {
      this.getUserList(1)
    },
    methods: {
      //修改操作
      updateUser(index,row){
        // console.log(index,row)
        UserApi.updateUserInfo(index,row)
          .then(response =>{
            this.$message({
              message:"修改用户操作成功",
              type:'success'
            }),
              // 更显数据显示
              this.getUserList(1)
            this.dialogVisible = false
          })
      },
      // 关闭对话框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      // 编辑按钮的方法
      handleEdit(index, row) {
        // index  当前行号
        // row    当前行的对象
        // console.log(index, row);
        // 当前对象的id处理
        index=row.id
        this.dialogVisible = true
      //   消息回显
        UserApi.selectUser(index)
          .then(response =>{
            // console.log(response.data)
            this.formLabelAlign = response.data
        })
      },
      // 删除按钮的方法
      handleDelete(index, row) {
        // index  当前行号
        // row    当前行的对象
        // console.log(index,row);
        // 当前对象的id处理
        index=row.id

        UserApi.deleteUser(index)
          .then(response =>{
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            // 更显数据显示
            this.getUserList(1)
          })
      },
      // 点击分页标签
      handleCurrentChange(val){
        // val: 当前页码
        // console.log(val)
        this.currentpage = val
        this.getUserList(val)
      },
      //获取用户列表
      getUserList(page){
        UserApi.getUserList(page)
          .then(response=>{
            // console.log(response.data.records)
            this.tableData = response.data.records
            // 时间格式处理
            for (let i = 0; i < this.tableData.length; i++) {
              this.tableData[i].createTime = this.tableData[i].createTime.substring(0,10)
              this.total = response.data.total
            }
          })
      },
    },

}
</script>

<style scoped>
.app{
  padding: 10px 40px;
}


</style>
